"use client";

import "./home.css";
import React from "react";
import navList from "@/lib/routeList";
import type { MenuProps } from "antd";
import { useState, useEffect, useMemo } from "react";
import { useRouter } from "next/navigation";
import { Layout, Menu, theme } from "antd";
import { HomeFilled } from "@ant-design/icons";

const { Header, Content, Sider } = Layout;

const HomeLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const router = useRouter();

  const [sideMenu, setSideMenu] = useState("menu");

  const sideTop = useMemo(() => {
    let target = navList.find((i) => i.key === sideMenu);
    switch (target?.key) {
      case "menu":
        return { title: "快捷菜单", icon: target.icon };
      case "custom":
        return { title: "客户管理", icon: target.icon };
      case "business":
        return { title: "商机管理", icon: target.icon };
      case "order":
        return { title: "订单管理", icon: target.icon };
      case "finance":
        return { title: "财务管理", icon: target.icon };
      case "examine":
        return { title: "审批管理", icon: target.icon };
      case "statistics":
        return { title: "统计分析", icon: target.icon };
      case "workOrder":
        return { title: "工单管理", icon: target.icon };
      case "applyFor":
        return { title: "办公申请", icon: target.icon };
      case "work":
        return { title: "办公管理", icon: target.icon };
      case "tool":
        return { title: "营销工具", icon: target.icon };
      case "manage":
        return;
      default:
        break;
    }
  }, [sideMenu]);

  const items1: MenuProps["items"] = navList.map((i) => ({
    key: i.key,
    label: i.label,
    icon: React.createElement(i.icon),
  }));

  const items2 = navList
    .find((i) => i.key === sideMenu)
    ?.children.map((m: any) => {
      if (m.children) {
        return {
          key: m.key,
          label: m.label,
          children: m.children,
        };
      } else {
        return { key: m.key, label: m.label };
      }
    });

  useEffect(() => {}, []);
  return (
    <Layout
      style={{
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
      }}
    >
      <Header
        style={{
          display: "flex",
          padding: 0,
          alignItems: "center",
          height: "50px",
          backgroundColor: "#58a3f7",
        }}
      >
        <div className="logo">
          <div className="w-[90px] h-full flex justify-center items-center">
            <img className="w-[35px]" src="/logo.png" alt="" />
          </div>
          <h2>客户关系管理系统</h2>
        </div>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["menu"]}
          items={items1}
          onClick={(e) => {
            setSideMenu(e.key);
          }}
          style={{
            flex: 1,
            height: "50px",
            display: "flex",
            color: "white",
            alignItems: "center",
            backgroundColor: "#58a3f7",
          }}
        />
      </Header>
      {/* 主体内容 */}
      <Layout
        style={{
          background: colorBgContainer,
          borderRadius: borderRadiusLG,
        }}
      >
        <Sider style={{ background: colorBgContainer }} width={180}>
          <div className="flex h-[50px] bg-[#f2f2f2] pl-[15px] items-center text-[#666] font-medium">
            <div>
              {sideTop &&
                React.createElement(sideTop.icon as React.FunctionComponent)}
            </div>
            <span className="ml-[5px]">{sideTop?.title}</span>
          </div>
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%" }}
            items={items2}
            onClick={(e) => {
              router.push(e.key);
            }}
          />
        </Sider>
        <Content
          style={{
            minHeight: 280,
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div
            style={{
              padding: "14px 0 14px 25px",
              boxShadow: "0px 3px 5px rgba(153, 153, 153, 0.2)",
            }}
          >
            <HomeFilled
              style={{ fontSize: "18px", color: "#888" }}
              onClick={() => {
                router.push("/home");
              }}
            />
          </div>
          {/* 右侧子路由 */}
          <div
            style={{
              flex: 1,
              width: "100%",
              overflowY: "scroll",
              padding: "15px",
            }}
          >
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default HomeLayout;
